<script setup lang="ts">
import { ManageApi } from "@/api/crm"
import { onMounted, ref, watch } from "vue"

defineOptions({
  name: "orgStatus"
})
const statusData = ref({
  status: "",
  sid: ""
})
const loading = ref(true)
const statusList = ref()
/**获取状态列表 */
const getStatusList = async () => {
  let resp = await ManageApi.orgStatus.getStatusList()
  statusList.value = resp.data
}
onMounted(() => {
  getStatusList()
  // console.log(resp.data);
})
const addStatus = async () => {
  let resp = await ManageApi.orgStatus.addStatus(statusData.value)
  statusData.value.sid = ""
  statusData.value.status = ""
  getStatusList()
}
watch(
  statusList,
  () => {
    loading.value = false
  }
  //   { immediate: true }
)
const editStatus = (e) => {
  console.log(e)
}
const delStatus = (row) => {
  let id = row._id
  ManageApi.orgStatus.deleteStatus({ id })
  getStatusList()
}
</script>

<template>
  <div class="layout-container">
    <el-card>
      <el-form :inline="true" label-width="90px">
        <el-form-item label="状态名称：">
          <el-input v-model="statusData.status" placeholder="状态名称"></el-input>
        </el-form-item>
        <el-form-item label="状态编号：">
          <el-input v-model="statusData.sid" placeholder="建议1XXN四位"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addStatus">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 15px">
      <div v-if="loading">
        <el-skeleton :rows="3" animated />
      </div>
      <div v-else>
        <el-table :data="statusList">
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column label="状态名称" prop="status"></el-table-column>
          <el-table-column label="状态编号" prop="sid"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button link type="primary" @click="editStatus(scope.row)">修改</el-button>
              <el-button link type="danger" @click="delStatus(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped></style>
